<template>
  <div>
    <a-card title="告警概览" :bordered="false" :headStyle="{ padding: '0 15px', border:0}" style="width:100%">
      <a-row>
        <a-col :xl="14" :lg="12" :md="12" :sm="24" :xs="24">
          <div class="alertcount">
            <div class="countlist">
              <h5>3</h5>
              <p>数据中心</p>
            </div>
            <div class="countlist">
              <h5>40</h5>
              <p>一级网点</p>
            </div>
            <div class="countlist">
              <h5>156</h5>
              <p>线路数</p>
            </div>
          </div>
          <div class="alertcount" style="margin-bottom: 10px;">
            <div class="countlist">
              <h5>346</h5>
              <p>设备数</p>
            </div>
            <div class="countlist">
              <h5>12GB</h5>
              <p>总带宽</p>
            </div>
          </div>
        </a-col>
        <a-col :xl="10" :lg="12" :md="12" :sm="24" :xs="24">
          <pie-chart id="alarmHandleRate" :opiton="optionRate" style="width:100%; height:225px"></pie-chart>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
// import { getMcaCount } from '@/api/performance'
import pieChart from './pieChart'
export default {
  name: 'AlarmSummary',
  components: {
    pieChart
  },
  data () {
    return {
      optionRate: {
        backgroundColor: '#fff',
        legend: {
          x: 'center',
          y: '160px',
          data: [
            '相应率', '处置率'
          ],
          textStyle: {// 图例文字的样式
            color: '#333',
            fontSize: 12
          }
        },
        series: [
          {
            type: 'pie',
            center: ['25%', '45%'],
            radius: [40, 50],
            x: '0%', // for funnel
            itemStyle: {
              normal: {
                label: {
                  formatter: function (params) {
                    return 100 - params.value + '%'
                  },
                  textStyle: {
                    baseline: 'top'
                  }
                }
              }
            },
            data: [
              { 
                name: 'other', 
                value: 46, 
                itemStyle: {
                  normal: {
                    color: '#bca29a',
                    label: {
                      show: true,
                      position: 'center'
                    },
                    labelLine: {
                      show: false
                    }
                  },
                  emphasis: {
                    color: '#333'
                  }
                } 
              },
              { 
                name: '相应率', 
                value: 54, 
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      position: 'center',
                      formatter: '{b}',
                      textStyle: {
                        baseline: 'bottom'
                      }
                    },
                    labelLine: {
                      show: false
                    }
                  }
                } 
              }
            ]
          },
          {
            type: 'pie',
            center: ['70%', '45%'],
            radius: [40, 50],
            x: '20%', // for funnel
            itemStyle: {
              normal: {
                label: {
                  formatter: function (params) {
                    return 100 - params.value + '%'
                  },
                  textStyle: {
                    baseline: 'top'
                  }
                }
              }
            },
            data: [
              { 
                name: 'other', 
                value: 56, 
                itemStyle: {
                  normal: {
                    color: '#bca29a',
                    label: {
                      show: true,
                      position: 'center'
                    },
                    labelLine: {
                      show: false
                    }
                  },
                  emphasis: {
                    color: '#333'
                  }
                } 
              },
              { 
                name: '处置率', 
                value: 44, 
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      position: 'center',
                      formatter: '{b}',
                      textStyle: {
                        fontSize: '20',
                        fontWeight: 'bold',
                        color: '#f00'
                      }
                    },
                    labelLine: {
                      show: true
                    }
                  }
                } 
              }
            ]
          }
        ]
      }
    }
  },
  created () {
  },
  mounted () {
    // this.getalArmHandleRate()
    // 轮询接口
    const timers = window.setInterval(() => {
      setTimeout(res => {
      }, 0)// 利用定时器清除setInterval的每次叠加
    }, 60000)// 1分钟执行一次
    // this.once在离开当前路由时销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timers)
    })
  },
  /**
   * 数字格式化为千分位
   */
  filters: {
    format: function (value) {
      return value.toLocaleString()
    }
  },
  methods: {
    /**
     * 相应处置率
     */
    getalArmHandleRate () {
      // 告警处置率
      const rateDate = [
        {
          name: '相应率',
          value: 54
        }, {
          name: '处置率',
          value: 44
        }]
        const titleArr = []
        const seriesArr = []
        const colors = [['#389af4', '#dfeaff'], ['#ff8c37', '#ffdcc3']]
        rateDate.forEach(function (item, index) {
          titleArr.push(
            {
              text: item.name,
              left: index * 20 + 10 + '%',
              top: '65%',
              textAlign: 'center',
              textStyle: {
                  fontWeight: 'normal',
                  fontSize: '16',
                  color: colors[index][0],
                  textAlign: 'center'
              }
            }        
          )
          seriesArr.push(
            {
              name: item.name,
              type: 'pie',
              clockWise: false,
              radius: [60, 70],
              itemStyle: {
                normal: {
                  color: colors[index][0],
                  shadowColor: colors[index][0],
                  shadowBlur: 0,
                  label: {
                      show: false
                  },
                  labelLine: {
                      show: false
                  }
                }
              },
              hoverAnimation: false,
              center: [index * 20 + 10 + '%', '50%'],
              data: [{
                value: item.value,
                label: {
                  normal: {
                    formatter: function (params) {
                        return params.value + '%'
                    },
                    position: 'center',
                    show: true,
                    textStyle: {
                      fontSize: '20',
                      fontWeight: 'bold',
                      color: colors[index][0]
                    }
                  }
                }
              }, {
                  value: 100 - item.value,
                  name: 'invisible',
                  itemStyle: {
                    normal: {
                      color: colors[index][1]
                    },
                    emphasis: {
                      color: colors[index][1]
                    }
                  }
              }]
            }    
          )
        })
    }
  }
}
</script>
<style lang="less" scoped>
  .ant-card{
    /deep/.ant-card-body{
      padding:0 15px 15px 15px;
    }
  }
  .alertcount{
    display: -webkit-flex; /* Safari */
    display: flex;
    justify-content:center;
    /deep/.countlist{
      width: 100px;
      height: 100px;
      text-align: center;
      background: url(~@/assets/hexagon.svg) no-repeat;
      background-size: 100% auto;
      h5{
        margin: 0;
        margin-top: 15px;
        height: 40px;
        line-height: 40px;
        font-size: 2rem;
        color: #999;
      }
      p{
        margin: 0;
        font-size: 14px;
        color: #dedede;
        font-weight: 500;
      }
    }
  }
</style>
